<template>
    <div class="shape-box" ref="box">
        <svg width="100%" height="100%">
            <circle
                cx="50%"
                cy="50%"
                :r="radius"
                :stroke-width="strokeWidth"
                :stroke="stroke"
                :fill="fill"
            ></circle>
        </svg>
    </div>
</template>

<script>
export default {
    props: {
        strokeWidth: {
            type: Number,
            default: 1,
        },
        stroke: {
            type: String,
            default: '#000000',
        },
        fill: {
            type: String,
            default: 'rgba(0, 0, 0, 0)',
        },
        enstyle: {
            type: Object,
            default: () => ({}),
        }
    },
    computed: {
        radius() {
            const { width, height } = this.enstyle;
            const min = Math.min(width, height);
            const { strokeWidth } = this;
            console.log('width===?', width, height, this.enstyle);
            return `${Math.round((min - strokeWidth) / 2)}px`;
        }
    }
}
</script>

<style lang="less" scoped>
.shape-box {
    width: 100%;
    height: 100%;
}
</style>